import { Link } from "react-router-dom"
import { Card, Breadcrumb, Form, Button, Radio, DatePicker, Select, Table, Tag, Space, Popconfirm } from 'antd'
import FormItem from "antd/es/form/FormItem"
import { Option } from "antd/es/mentions"
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
import error from '@/assets/error.jpg'
import './index.scss'
import locale from 'antd/es/date-picker/locale/zh_CN'
import BreadcrumbItem from "antd/es/breadcrumb/BreadcrumbItem"
import { useEffect, useState } from "react"
import { http } from "@/utils"
import { history } from "@/utils/history"
import { useStore } from "@/store"
import { observer } from 'mobx-react-lite'
const Article = () => {
    const { RangePicker } = DatePicker
    // 频道列表管理
    const { channelStore } = useStore()
    // 文章列表管理模块
    const [article, setArticleList] = useState({
        list: [],
        count: 0
    })
    // 参数管理
    const [params, setParams] = useState({
        page: 1,
        per_page: 5
    })
    // 获取文章数据
    useEffect(() => {
        async function ferchArticleList() {
            const res = await http.get('/mp/articles', { params })
            // console.log(res)
            const { results, total_count } = res.data
            setArticleList({
                list: results,
                count: total_count
            })
        }
        ferchArticleList()
    }, [params])
    // 删除数据
    const delArticle = async (data) => {
        await http.delete(`/mp/articles/${data.id}`)
        setParams({
            page: 1,
            per_page: 10
        })
    }
    const columns = [{
        title: '封面',
        dataIndex: 'cover',
        width: 120,
        render: cover => {
            return <img src={cover.images[0] || error} width={80} height={40} alt="" />
        },
    },
    {
        title: '标题',
        dataIndex: 'title',
        width: 220
    },
    {
        title: "状态",
        dataIndex: "status",
        render: data => {
            return <Tag color="green">审核通过</Tag>
        }
    },
    {
        title: '发布时间',
        dataIndex: 'pubdate'
    },
    {
        title: '阅读数',
        dataIndex: 'read_count'
    }, {
        title: '评论数',
        dataIndex: 'comment_count'
    }, {
        title: '点赞数',
        dataIndex: 'like_count'
    }, {
        title: '操作',
        render: data => {
            return (
                <Space size="middle" >
                    <Button type="primary"
                        shape="circle"
                        icon={<EditOutlined
                            onClick={() => history.push(`/home/publish=${data.id}`)}
                        />}
                    />
                    <Popconfirm
                        title='确认删除这条文章吗'
                        onConfirm={() => delArticle(data)}
                        okText="确认"
                        cancelText="取消"
                    >
                        <Button type="primary"
                            danger shape="circle"
                            icon={<DeleteOutlined />}
                        />
                    </Popconfirm>
                </Space>
            )
        }
    }]
    const onSearch = (values) => {
        const { status, channel_id, date } = values
        // console.log(values)
        const _params = {}
        _params.status = status

        if (_params.id) {
            _params.channel_id = channel_id
        }
        if (date) {
            _params.begin_pubdate = date[0].format('YYYY-MM-DD')
            _params.end_pubdate = date[1].format('YYYY-MM-DD')
        }
        setParams({
            ...params,
            ..._params
        })
    }
    const pageChange = (page) => {
        // 拿到当前页参数 修改params 引起接口更新
        setParams(
            {
                ...params,
                page
            }
        )
    }
    return <div>
        {/* 筛选表单 */}
        {/* 面包屑 */}
        <Card
            title={
                <Breadcrumb separator=">">
                    <Breadcrumb.Item>
                        <Link to='/home'>首页</Link>
                    </Breadcrumb.Item>
                    <BreadcrumbItem>内容管理</BreadcrumbItem>
                </Breadcrumb>
            }
            style={{ marginBottom: 20 }}>
        </Card>
        {/* 模拟渲染 */}
        {/* 表单 */}
        <Form initialValues={{ status: null }} onFinish={onSearch}>
            <FormItem label='状态' name="status" style={{ padding: '0px' }} >
                <Radio.Group>
                    <Radio value={null}>全部</Radio>
                    <Radio value={0}>草稿</Radio>
                    <Radio value={1}>待审核</Radio>
                    <Radio value={2}>审核通过</Radio>
                    <Radio value={3}>审核失败</Radio>
                </Radio.Group>
            </FormItem>
            <FormItem label='频道' name="channel_id">
                <Select placeholder='请选择文章' style={{ width: '110px' }}>
                    {channelStore.channelList.map(channel => <Option key={channel.id}>{channel.name}</Option>)}
                </Select>
            </FormItem>
            <FormItem label="日期" name="date" >
                <RangePicker locale={locale}></RangePicker>

            </FormItem>
            <FormItem>
                <Button type="primary" htmlType="submit" style={{ marginLeft: '20px' }}>筛选</Button>
            </FormItem>
        </Form>
        {/* 结果表单 */}
        <Card title={`根据筛选条件共查询到 ${article.count} 条结果：`}>
            <Table rowKey="id"
                columns={columns}
                dataSource={article.list}
                pagination={{
                    position: ['bottomCenter'],
                    current: params.page,
                    pageSize: params.per_page,
                    onChange: pageChange
                }
                }
            ></Table>
        </Card>
    </div >
}
export default observer(Article)